<template>
  <div>
    <div>
      <div class="title">
        <span>学校费用</span>
      </div>
      <div class="hr"></div>

      <div>
        <el-table
            :data="paymentInfoList"
            :cell-style="tdStyle"
            :header-cell-style="thStyle"
            >
          <el-table-column prop="type" label="类别"></el-table-column>
          <el-table-column prop="attr" label="属性"></el-table-column>
          <el-table-column prop="cost" label="费用（元）"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PaymentInformationSheet",
  data() {
    return {
      paymentInfoList: [
        {
          type: '军训服',
          attr: '尺码:大号',
          cost: 200
        },
        {
          type: '学杂费',
          attr: '尺码:大号',
          cost: 200
        },
        {
          type: '住宿费',
          attr: '尺码:大号',
          cost: 200
        }
      ]
    }
  },
  created() {
  },
  methods: {
    thStyle() {
      return 'background-color:white;color:lightslategray;font-size:14px;text-align:center;'
    },
    tdStyle() {
      return 'font-size:14px;text-align:center;'
    }

  }
}
</script>

<style scoped>

.title {
  display: flex;
  align-items: center;
  height: 2.6rem;
  margin-top: 2rem;
  text-align: left;
  font-size: 1rem;
  border-left: 4px solid #13ce66;
}
.title span {
  margin-left: .7rem;
}
.hr {
  margin-top: .6rem;
  margin-bottom: .6rem;
  width: 100%;
  border-bottom: 1px solid #bfcbd9;
}
.line {
  margin: 3px 1rem 3px 1rem;
  height: 1rem;
  border-left: 1px solid #888888;
}
.name-css {
  border: 0;
  outline: none;
  width: 98%;
  font-size: 1rem;
  text-align: right;
}

</style>
